<template>
  <div class="apply" v-loading="pageLoading">
    <el-form class="earlyMappingForm" :inline="true" label-position="right" label-width="80px" :model="formData" ref="formData" :rules="formDataRules">
      <div class="maintitle">申请项目实施(市级项目)</div>
      <el-form-item label="实施金额" style=" margin-right:80px;" prop="implementationAmount">
        <el-input :readonly="disabled" style="width:180px" type="number" v-model="formData.implementationAmount">
          <i slot="suffix">万元</i>
        </el-input>
      </el-form-item>
      <el-form-item label="实施规模" prop="implementationScale">
        <el-input :readonly="disabled" style="width:180px" type="number" v-model="formData.implementationScale">
          <i slot="suffix">公顷</i>
        </el-input>
      </el-form-item>
      <div>
        <el-form-item label="项目实施申请书" label-width="120px" prop="implementationApplyBookFileId">
          <el-upload
            v-if="!disabled"
            class="upload-demo"
            :action="$config.uploadUrl"
            :limit="1"
            :before-upload="uploadBefore"
            :on-success="uploadReply"
            :file-list="fileList[0]"
            :disabled="disabled"
            accept=".pdf"
          >
            <el-button v-if="!disabled" size="small">上传</el-button>
            <!-- <el-button @click="seePdf" v-if="disabled" size="small">查看</el-button> -->
          </el-upload>
          <seeFujianForList v-if="disabled && fileList[0]" @openPdf="seePdf" :file-obj="fileList[0]" :file-num="0"/>
        </el-form-item>
      </div>

      <div style="margin-top:50px;">
        <el-form-item>
          <el-button v-if="!disabled" type="primary" @click="onSubmit">提交</el-button>
          <el-button v-if="!disabled">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-dialog
      :close-on-click-modal="false"
      :title="pdfName"
      :visible.sync="pdfFlag"
      width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProjectImplementation,
  submitImplementationData
} from "@/api/project1/projectImplementation/apply/index.js";
import {
  validateNotNull,
  validateUpload
} from "@/utils/validate.js"
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    seeFujianForList
  },
  data() {
    return {
      formData: {
        //提交值
        projectId: localStorage.getItem("projectId"),
        implementationAmount: null,
        implementationScale: null,
        implementationApplyBookFileId: null,
        implementationApplyBookFileInfo: {}
      },
      formDataRules:{
        implementationAmount:[{validator:validateNotNull,trigger:"blur"}],
        implementationScale:[{validator:validateNotNull,trigger:"blur"}],
        implementationApplyBookFileId:[{validator:validateUpload}],
      },
      fileList: [], //上传文件
      projectId: localStorage.getItem("projectId"),
      loading:false,
      pageLoading:false,
      disabled:true,
      pdfUrl:'',
      pdfFlag:false,
      pdfName:'',
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if(localStorage.getItem("lookStatus") == 2){
      this.disabled = true;
    }
    this.getDetail();
  },
  methods: {
    //查看当前PDF
    seePdf(num){
      console.log(this.fileList)
      this.pdfFlag = true
      this.pdfUrl = this.fileList[num][0].url
      this.pdfName = this.fileList[num][0].name
    },
    //获取数据
    getDetail() {
      this.pageLoading = true
      //获取基本信息（回显）
      getProjectImplementation({ projectId: this.projectId }).then(res => {
        this.pageLoading = false
        if (res.code == 1000 && res.data) {
          this.formData = res.data;
          this.fileList.push([
            {
              name: this.formData.implementationApplyBookFileInfo.fileName,
              url: this.formData.implementationApplyBookFileInfo.filePath
            }
          ]);
        }
      }).catch(err => {
        this.pageLoading = false
      });
    },
    //文件提交前
    uploadBefore: function(file) {
      var isTpye = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (isTpye != "pdf") {
        this.$message({
          showClose: true,
          message: "上传文件只能是pdf格式!",
          type: "error"
        });
        return false;
      }
    },
    //项目实施申请书上传
    uploadReply(res) {
      if (res.code == 1000) {
        this.formData.implementationApplyBookFileId = res.data.id;
      }
    },
    //提交
    onSubmit() {
      this.$refs['formData'].validate(valid => {
        if(valid){
          const loading = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)"
          });
          submitImplementationData(this.formData).then(res => {
            loading.close()
            if (res.code == 1000) {
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$router.push("/projectManagement/projectImplementation/dealwith")
            }
          }).catch(err => {
            loading.close()
          });
        }
      })      
    }
  }
};
</script>
<style lang="scss" scoped>
.apply {
  .resultIdea {
    /deep/ .el-tabs__content {
      overflow: unset;
    }
    /deep/ .el-tabs__header {
      background: #fff;
      height: 46px;
      padding: 0 20px;

      /deep/ .el-tabs__item {
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
        padding: 0 10px;
      }

      /deep/ .el-tabs__nav-wrap::after {
        width: 0;
      }
    }

    .earlyMappingForm {
      /deep/ .el-form-item__label {
        color: #8c8c8c;

        text-align: right;
      }
      /deep/ .el-input__suffix {
        i {
          font-style: normal;
        }
      }
      input {
        width: 180px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
      }
    }

    .formAllRow {
      /deep/ .el-form-item__content .el-textarea .el-textarea__inner {
        width: 1170px;
        max-width: calc(100vw - 320px - 60px);
      }

      /deep/ .el-form-item__label {
        display: block;
        text-align: left;
        margin-top: 15px;
      }

      /deep/ .el-form-item {
        width: 100%;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.processContainer {
  background: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  height: calc(100vh - 170px);
}
.apply {
  height: calc(100vh - 114px);
  padding: 30px;
  overflow: auto;
  background: #f5f6f7;
  .earlyMappingForm {
    background: #fff;
    padding: 20px;
    min-height: calc(100vh - 170px);
  }
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
    margin-top: 60px;
    margin-bottom: 30px;
    &:first-child {
      margin-top: 0;
    }
  }
  .basicInfo {
    span {
      display: inline-block;
      margin: 20px 60px 0 0;
      font-size: 14px;
      color: #8c8c8c;
    }
  }
  .formcontent {
    margin-top: 30px;
  }
  .secondtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    margin-right: 20px;
    line-height: 38px;
  }
  .area {
    padding: 0 0 15px 0;
  }
}
</style>

